<template>
    <div class="data-dashboard">
      <h2>数据统计看板</h2>
      
      <!-- 数据统计卡片 -->
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="6">
          <el-card>
            <div class="dashboard-item">
              <div class="dashboard-icon" style="background-color: #4CAF50">
                <el-icon><document /></el-icon>
              </div>
              <div class="dashboard-content">
                <div class="dashboard-title">总工单数</div>
                <div class="dashboard-value">128</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="dashboard-item">
              <div class="dashboard-icon" style="background-color: #2196F3">
                <el-icon><info /></el-icon>
              </div>
              <div class="dashboard-content">
                <div class="dashboard-title">已完成工单</div>
                <div class="dashboard-value">86</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="dashboard-item">
              <div class="dashboard-icon" style="background-color: #FF9800">
                <el-icon><warning /></el-icon>
              </div>
              <div class="dashboard-content">
                <div class="dashboard-title">进行中工单</div>
                <div class="dashboard-value">32</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="dashboard-item">
              <div class="dashboard-icon" style="background-color: #F44336">
                <el-icon><close /></el-icon>
              </div>
              <div class="dashboard-content">
                <div class="dashboard-title">未完成工单</div>
                <div class="dashboard-value">10</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 工单状态统计图表 -->
      <el-card style="margin-bottom: 20px">
        <template #header>
          <div class="card-header">
            <span>工单状态统计</span>
          </div>
        </template>
        <div ref="statusChart" style="width: 100%; height: 300px"></div>
      </el-card>
  
      <!-- 工单类型统计图表 -->
      <el-card>
        <template #header>
          <div class="card-header">
            <span>工单类型统计</span>
          </div>
        </template>
        <div ref="typeChart" style="width: 100%; height: 300px"></div>
      </el-card>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import * as echarts from 'echarts'
  
  // 工单状态统计图表
  const statusChart = ref()
  onMounted(() => {
    const chart = echarts.init(statusChart.value)
    const option = {
      title: {
        text: '工单状态分布'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '工单状态',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 86, name: '已完成' },
            { value: 32, name: '进行中' },
            { value: 10, name: '未完成' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    chart.setOption(option)
  })
  
  // 工单类型统计图表
  const typeChart = ref()
  onMounted(() => {
    const chart = echarts.init(typeChart.value)
    const option = {
      title: {
        text: '工单类型统计'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['数量']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['系统维护', '用户反馈', '功能优化', '性能优化', '安全更新']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '数量',
          type: 'bar',
          data: [25, 30, 20, 15, 38]
        }
      ]
    }
    chart.setOption(option)
  })
  </script>
  
  <style scoped>
  .data-dashboard {
    padding: 20px;
  }
  
  .dashboard-item {
    display: flex;
    align-items: center;
  }
  
  .dashboard-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
  }
  
  .dashboard-icon .el-icon {
    font-size: 24px;
    color: white;
  }
  
  .dashboard-content {
    flex: 1;
  }
  
  .dashboard-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
  }
  
  .dashboard-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>